<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="springform"
	uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@	taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="/WEB-INF/views/webPartBiz/head.jsp"></jsp:include>
<title>标签 - 呵Sever</title>
<style type="text/css">
input.editInput {
	padding: 0px;
	height: 20px;
	width: 100px;
	margin: 0;
}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/views/webPartBiz/top.jsp"></jsp:include>
	<jsp:include page="/WEB-INF/views/webPartBiz/left.jsp"></jsp:include>
	<div class="mycol col-md-11 col-xs-11">
		<div class="main">
			<div class="mainItem">
				<h3>标签管理</h3>
				<div class="title">
					<form action="${context }/biz/tag/add" method="post">
						<input type="hidden" name="parentId" value=""> 根标签：<input
							type="text" name="name" placeholder="请输入标签名">
						<button class="btn btn-default">添加</button>
					</form>
				</div>
				<br>
				<c:forEach items="${tags }" var="item">
					<c:if test="${item.parentTag == null }">
						<div class="tree">
							<ul>
								<li>
									<div id="${item.id }">
										<span class="tag">
											<div class="tagName">${item.name }</div>
											<form id="formEdit${item.id }"
												action="${context }/biz/tag/edit" method="post">
												<input type="hidden" name="id" value="${item.id }">
												<input id='edit${item.id }' name="name" type='text'
													class='editInput' value='${item.name }'
													style="display: none;">
											</form>
										</span> <span class="editTool"> <a
											href="javascript:editTag('${item.id }',false)"
											class="glyphicon glyphicon-edit"></a> <a
											href="javascript:addTag('${item.id }')"
											class="glyphicon glyphicon-plus"></a> <a
											href="${context }/biz/tag/del/${item.id }"
											class="glyphicon glyphicon-remove"></a>
										</span>
									</div>
									<ul>
										<li id="add${item.id }" class="edit" style="display: none;">
											<span class="tag"> <i class="icon-minus-sign"></i>
												<form id="formadd${item.id }"
													action="${context }/biz/tag/add" method="post">
													<input type="hidden" name="parentId" value="${item.id }">
													<input type="text" name="name" class="editInput">
												</form>
										</span> <a href="javascript:submitAddTag('${item.id }')"
											class="glyphicon glyphicon-ok"></a> <a
											href="javascript:addTag('${item.id }')"
											class="glyphicon glyphicon-remove"></a>
										</li>

										<c:forEach items="${item.childTags }" var="child">
											<li>
												<div id="${child.id }">
													<span class="tag">
														<div class="tagName">${child.name }</div>
														<form id="formEdit${child.id }"
															action="${context }/biz/tag/edit" method="post">
															<input type="hidden" name="id" value="${child.id }">
															<input id='edit${child.id }' name="name" type='text'
																class='editInput' value='${child.name }'
																style="display: none;">
														</form>
													</span> <span class="editTool"> <a
														href="javascript:editTag('${child.id }',false)"
														class="glyphicon glyphicon-edit"></a> <a
														href="javascript:addTag('${child.id }')"
														class="glyphicon glyphicon-plus"></a> <a
														href="${context }/biz/tag/del/${child.id }"
														class="glyphicon glyphicon-remove"></a>
													</span>
												</div>
												<ul>
													<li id="add${child.id }" class="edit"
														style="display: none;"><span class="tag"> <i
															class="icon-minus-sign"></i>
															<form id="formadd${child.id }"
																action="${context }/biz/tag/add" method="post">
																<input type="hidden" name="parentId"
																	value="${child.id }"> <input type="text"
																	name="name" class="editInput">
															</form>
													</span> <a href="javascript:submitAddTag('${child.id }')"
														class="glyphicon glyphicon-ok"></a> <a
														href="javascript:addTag('${child.id }')"
														class="glyphicon glyphicon-remove"></a></li>
													<c:forEach items="${child.childTags }" var="grandChild">
														<li>
															<div id="${grandChild.id }">
																<span class="tag">
																	<div class="tagName">${grandChild.name }</div>
																	<form id="formEdit${grandChild.id }"
																		action="${context }/biz/tag/edit" method="post">
																		<input type="hidden" name="id"
																			value="${grandChild.id }"> <input
																			id='edit${grandChild.id }' name="name" type='text'
																			class='editInput' value='${grandChild.name }'
																			style="display: none;">
																	</form>
																</span> <span class="editTool"> <a
																	href="javascript:editTag('${grandChild.id }',true)"
																	class="glyphicon glyphicon-edit"></a> <a
																	href="${context }/biz/tag/del/${grandChild.id }"
																	class="glyphicon glyphicon-remove"></a>
																</span>
															</div>
														</li>
													</c:forEach>
												</ul>
											</li>
										</c:forEach>
									</ul>
								</li>
							</ul>
						</div>
					</c:if>
				</c:forEach>
				<!-- <div class="tree">
					<ul>
						<li><span class="tag">编辑树-Parent</span> <a href=""
							class="glyphicon glyphicon-edit"></a> <a href=""
							class="glyphicon glyphicon-remove"></a>
							<ul>
								<li><span class="tag"><i class="icon-minus-sign"></i>
										Child</span> <a href="" class="glyphicon glyphicon-edit"></a> <a
									href="" class="glyphicon glyphicon-remove"></a>
									<ul>
										<li><span class="tag"><i class="icon-leaf"></i>
												Grand Child</span> <a href="" class="glyphicon glyphicon-edit"></a>
											<a href="" class="glyphicon glyphicon-remove"></a></li>
									</ul></li>
								<li><span class="tag"><i class="icon-minus-sign"></i>
										Child</span> <a href="" class="glyphicon glyphicon-edit"></a> <a
									href="" class="glyphicon glyphicon-remove"></a>
									<ul>
										<li><span class="tag"><i class="icon-leaf"></i>
												Grand Child</span> <a href="" class="glyphicon glyphicon-edit"></a>
											<a href="" class="glyphicon glyphicon-remove"></a></li>
									</ul></li>
							</ul></li>
					</ul>
				</div>
				<div class="tree show">
					<ul>
						<li><span class="tag">展示树-Parent</span>
							<ul>
								<li><span class="tag"><i class="icon-minus-sign"></i>
										Child</span>
									<ul>
										<li><span class="tag"><i class="icon-leaf"></i>
												Grand Child</span></li>
									</ul></li>
								<li><span class="tag"><i class="icon-leaf"></i>
										Child</span>
								</li>
							</ul></li>
					</ul>
				</div> -->
			</div>
		</div>
	</div>
	<jsp:include page="/WEB-INF/views/webPartBiz/right.jsp"></jsp:include>
	<jsp:include page="/WEB-INF/views/webPartBiz/footer.jsp"></jsp:include>
</body>
</html>

<script type="text/javascript">
	function editTag(id, isLeaf) {
		var tag = $("#" + id).find(".tag");
		var tagName = tag.find(".tagName");
		var tagEdit = tag.find(".editInput");
		tagName.hide();
		tagEdit.val(tagName.html());
		tagEdit.show();
		tagEdit.focus();
		var editTool = $("#" + id).find(".editTool");
		editTool.html("<a href='javascript:submitEditTag(&quot;" + id
				+ "&quot;)' class='glyphicon glyphicon-ok'></a> "
				+ "<a href='javascript:cancelEditTag(&quot;" + id + "&quot;,"
				+ isLeaf + ")' class='glyphicon glyphicon-remove'></a>");
	}
	function cancelEditTag(id, isLeaf) {
		var tag = $("#" + id).find(".tag");
		var tagName = tag.find(".tagName");
		var tagEdit = tag.find(".editInput");
		tagName.show();
		tagEdit.hide();

		var editTool = $("#" + id).find(".editTool");
		if (isLeaf) {
			editTool
					.html("<a href='javascript:editTag(&quot;"
							+ id
							+ "&quot;,"
							+ isLeaf
							+ ")' class='glyphicon glyphicon-edit'></a> "
							+ "<a href='${context }/biz/tag/del/"+id+"' class='glyphicon glyphicon-remove'></a>");
		} else {
			editTool
					.html("<a href='javascript:editTag(&quot;"
							+ id
							+ "&quot;,"
							+ isLeaf
							+ ")' class='glyphicon glyphicon-edit'></a> "
							+ "<a href='javascript:addTag(&quot;"
							+ id
							+ "&quot;)' class='glyphicon glyphicon-plus'></a> "
							+ "<a href='${context }/biz/tag/del/"+id+"' class='glyphicon glyphicon-remove'></a>");
		}
	}
	function submitEditTag(id) {
		$("#formEdit" + id).submit();
	}
	function submitAddTag(id) {
		$("#formadd" + id).submit();
	}
	function addTag(id) {
		if ($("#add" + id).is(":visible")) {
			$("#add" + id).hide('fast');
		} else {
			$("#add" + id).show('fast');
			$("#add" + id + " input").focus();
		}
	}
</script>